<template>
	<view class="bg-zinc-100 relative min-h-screen">
		<up-navbar title="旅居详情" :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome"></up-icon>
				</view>
			</template>
		</up-navbar>
		<view class="p-[20rpx] rounded-[16rpx]">
			<view class="relative">
				<up-swiper :list="info?.gallery" height="484rpx" mode="aspectFill" indicator-dots indicator-color="rgba(255,255,255,0.3)" indicator-active-color="#fff" circular></up-swiper>
				<view class="text-[#fff] px-[12rpx] py-[4rpx] bg-[#000] bg-opacity-[0.5] absolute bottom-[16rpx] right-[16rpx] text-[22rpx] font-normal">{{ info?.gallery.length }}旅居照片</view>
			</view>
			<view class="p-[20rpx] bg-[#fff] rounded-b-[16rpx]">
				<view class="text-[#101010] text-[36rpx] font-bold mb-[16rpx]">{{ info.name }}</view>
				<view class="flex items-end mb-[18rpx]">
					<view class="text-[#e5403e] text-[44rpx] font-bold mr-[8rpx]">{{ info.price }}</view>
					<view class="text-[#e5403e] text-[33rpx] font-normal">元/天</view>
				</view>
				<view class="flex mb-[16rpx]">
					<view v-for="(item,index) in info.feature" :key="index" class="rounded-[4rpx] text-[#46A7FD] text-[24rpx] font-normal px-[10rpx] py-[2rpx] bg-[#DAEDFF] mr-[8rpx] w-fit">{{ item }}</view>
				</view>
				<view class="flex items-center mb-[20rpx]">
					<image src="../static/address.png" mode="scaleToFill" class="mr-[8rpx] w-[36rpx] h-[36rpx] block"/>
					<view class="text-[#46A7FD] text-[26rpx] font-normal">{{ info.address }}</view>
				</view>
				<view class="bg-[#F7F8FA] rounded-[12rpx] px-[20rpx] py-[16rpx] mb-[24rpx]">
					<view v-for="(item,index) in info.advantage" :key="index" :class="index == info.advantage.length-1 ? ' ':'mr-[24rpx]'">
						<view class="w-[120rpx] mr-[26rpx]">
							<view class="color-[#111111] text-[26rpx] font-bold mb-[8rpx]">{{ item.key }}</view>
							<view class="color-[#999] text-[22rpx] font-normal">{{ item.value }}</view>
						</view>
						<up-line v-if="!(index == info.advantage.length -1)" color="#EEF2F5"></up-line>
					</view>
				</view>
				<view>
					<view class="flex items-center mb-[20rpx] pl-[20rpx]" v-for="(item,index) in info.contentInfo" :key="index">
						<view class="text-[#999999] text-[26rpx] font-normal mr-[48rpx]">{{ item.key }}</view>
						<view class="text-[#333] text-[26rpx] font-normal">{{ item.value }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-[#fff] flex absolute w-[100%] box-border pl-[48rpx] pr-[30rpx] pt-[20rpx] pb-[50rpx] bottom-0 left-0">
			<view class="flex items-center flex-col justify-center mr-[48rpx]">
				<image src="../static/kf.png" mode="" class="w-[48rpx] h-[48rpx] block"></image>
				<view class="">客服</view>
			</view>
			<view v-if="!info.isCollect" class="flex items-center flex-col justify-center mr-[48rpx]" @click="getIsCollect">
				<image src="../static/sc.png" mode="" class="w-[48rpx] h-[48rpx] block"></image>
				<view class="">收藏</view>
			</view>
			<view v-else class="flex items-center flex-col justify-center mr-[48rpx]" @click="getIsCollect">
				<image src="../static/sc-fill.png" mode="" class="w-[48rpx] h-[48rpx] block"></image>
				<view class="">收藏</view>
			</view>
			<view @click="yuyue" class="w-[432rpx] h-[80rpx] bg-[#46A7FD] text-[#fff] leading-[80rpx] rounded-[40rpx] text-center">立即预约</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { GetTravelDetail, GetTravelPre } from '../../API/sojourn';
const { goback , gohome } = useTab()
const { id , info , getInfo } = useInfo()
const { yuyue , getIsCollect } = useBtn()
import env from '@/config/common.js'
import { GetTravelCollect } from '../../API/sojourn.js';
let baseUrl = ref(env.API_BASE_URL_DEV)
function useTab(){
	const goback = ()=>{
		uni.navigateBack()
	}
	const gohome = ()=>{
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
	return{ goback , gohome }
}
function useInfo(){
	const id = ref(null)
	const info = ref(null)
	const getInfo = async (id)=>{
		try {
			let { data } = await GetTravelDetail(id)
			info.value = data
			info.value.gallery = data.gallery.map(item=>{
				item = baseUrl.value + item
				return item
			})
		} catch (error) {
			console.log(error);
		}
	}
	return{
		id,
		info,
		getInfo
	}
}
function useBtn(){
	const yuyue = async ()=>{
		uni.navigateTo({ url: `/pageOrder/AdvanceOrder/AdvanceOrder?id=${id.value}`})
	}
	const getIsCollect = async (value)=>{
		let { data } = await GetTravelCollect(id.value)
		await getInfo(id.value)
	}
	return{
		yuyue,
		getIsCollect
	}
}

onLoad(async (options)=>{
	id.value = options.id
	await getInfo(id.value)
})
</script>

<style lang="scss" scoped>

</style>